<template>
	<view class="conference-management">
		<xbd-pages-content title="会议管理">
		<template #content>
			<view class="content">
				<view class="banner" >
					<image src="../../static/images/conference/conference-bg.jpg" mode=""></image>
				</view>
				<view class="body">
					<xbd-apply-card
						class="bt"
						:cardIcon="require('../../static/images/conference/conference.svg')" 
						:cardBg="require('../../static/images/meal/greenBg.png')"
						cardTag="会议室预定"
						@clickApplyCard="clickApplyCard('appoint')"
					></xbd-apply-card>
					<xbd-apply-card
					class="bt"
						:cardIcon="require('../../static/images/car/carMy.svg')"
						:cardBg="require('../../static/images/meal/blue.png')"
						cardTag="我的预定"
						@clickApplyCard="clickApplyCard('apply')"
					></xbd-apply-card>
					<xbd-apply-card
						:cardIcon="require('../../static/images/car/carApp.svg')"
						:cardBg="require('../../static/images/meal/purple.png')"
						cardTag="我的审批"
						@clickApplyCard="clickApplyCard('approve')"
					></xbd-apply-card>
				</view>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			clickApplyCard(str) {
				let url = '';
				switch (str) {
					case 'appoint':
						url = './appointment'
						break;
					case 'apply':
						url = './reservation'
						break;
					case 'approve':
						// if(~this.userInfo.user_permission.indexOf('部门负责人')) {
							url = './approval'
						// } else {
						// 	this.$showToast('您没有审批权限');
						// }
						break;
				}
				url && uni.navigateTo({
					url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.banner{
	height: 140px;
		
	image{
		height: 140px;
		width: 100%;
	}
}
.body{
	background-color: #FFFFFF;
	// height: 180px;
	box-sizing: border-box;
	padding: 20px 50rpx;
	margin-bottom: 5px;

}
.bottom{
	height: 460px;
	background-color: #FFFFFF;
	box-sizing: border-box;
	padding: 30px 50rpx;

}
	.bt{
		margin-bottom: 20px;
	}
</style>
